<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" media="all" />
<link rel="stylesheet" href="css/jcontent.css" media="all" />
<link rel="stylesheet" href="css/menu.css" media="all" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.min.1.3.js" type="text/javascript"></script>
<script src="js/jquery.jcontent.0.8.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $("document").ready(function(){
		$("div#demo").jContent({orientation: 'vertical',
								easing: 'easeOutCirc',
								duration: 500}); 
								});
</script>
<title>Untitled Document</title>
</head>

<body>
	<div class="page">
	<header>
    	<div class="head">
        	<article class="toppic">
            	<h3>Fancy Thumbnail Hover Effect with jQuery</h3>
            </article>
            <nav>
            	<ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a class="hsubs" href="#">Menu 1</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 1</a></li>
                        <li><a href="#">Submenu 2</a></li>
                        <li><a href="#">Submenu 3</a></li>
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 2</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 2-1</a></li>
                        <li><a href="#">Submenu 2-2</a></li>
                        <li><a href="#">Submenu 2-3</a></li>
                        <li><a href="#">Submenu 2-4</a></li>
                        <li><a href="#">Submenu 2-5</a></li>
                        <li><a href="#">Submenu 2-6</a></li>
                        <li><a href="#">Submenu 2-7</a></li>
                        <li><a href="#">Submenu 2-8</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 3</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 3-1</a></li>
                        <li><a href="#">Submenu 3-2</a></li>
                        <li><a href="#">Submenu 3-3</a></li>
                        <li><a href="#">Submenu 3-4</a></li>
                        <li><a href="#">Submenu 3-5</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="#">Menu 6</a></li>
                <li><a href="#">Back</a></li>
                <div id="lavalamp"></div>
            </ul>
            </nav>
            <div class="submenu">
            	<span class="toggle"></span>
            </div>
        </div>
    </header>
    <div class="main">
		<article class="article">
        	<div class="content">
            	<div class="col-1">
                	<div class="extra-col-1">
                        <h2>The Evolving Role of Social Media</h2>
                        <img src="images/2323.png"  />
                        <p>A few years ago, news organizations were unsure about social. Journalists were apprehensive to create Twitter accounts and media companies questioned whether a branded Facebook fan page was necessary.</p>
                     </div>
                     <div class="extra-2-col-1">
                        <h2>The Evolving Role of Social Media</h2>
                        <img src="images/2323.png"  />
                        <p>A few years ago, news organizations were unsure about social. Journalists were apprehensive to create Twitter accounts and media companies questioned whether a branded Facebook fan page was necessary.</p>
                     </div>
                </div> <!--  end col-1 -->
            	<div class="col-2">
                	<div class="side-show">
                    	<div id="demo">
                            <a title="" href="#" class="prev"></a>
                            <div class="slides">
                                <div>
                                	<h2>Lorem ipsum dolor </h2>
                                    <img src="img/slides/slid15.jpg" style="width:400px;height:155px;"  />
                                </div>  
                                <div>
                                <p class="title">Slide 2</p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>              
                                <div></div>  
                                <div>
                                <p class="title">Slide 2</p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>  
                            </div>
                            <a title="" href="#" class="next"></a>
                        </div>
                    </div><!--  demo -->
                </div><!-- side-show -->
            </div><!--  end col-2 -->
        </article>
        <aside class="advan">
        	<div id="sidebar">
            	<ul class="sidebar-list">
                	<li class="advan1">
                    	<div>
                        	<h2>consectetur adipisicing</h2>
                            <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </li>
                    <li class="advan2">
                    	<div>
                        	<h2>consectetur adipisicing</h2>
                            <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            <img src="img/slides/slide15.jpg" width="100%"; />
                        </div>
                    </li>
                    <li class="advan3">
                    	<div>
                        	<h2>consectetur adipisicing</h2>
                            <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </li>
                </ul>
            </div>
        </aside>
    </div>    <!--   end main -->
    <footer>
    	
    </footer>
    </div><!--   end page -->
</body>
</html>
